.ProseMirror > * + * {
  margin-top: 0;
}
.ProseMirror p:first-child {
  margin-top: 0;
}
.ProseMirror p:last-child {
  margin-bottom: 0;
}
.ProseMirror p.is-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  opacity: 0.25;
  pointer-events: none;
  height: 0;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ProseMirror-gapcursor {
  @apply !w-full !m-0 !relative;
}
.ProseMirror-gapcursor::after {
  @apply !border-primary !w-full !z-1 !my-0 !top-0;
}
:where(td, th) .ProseMirror-gapcursor::after {
  @apply !w-[calc(100%-1rem)];
}
div:not([data-element="true"]) + .ProseMirror-gapcursor:has(+ div)::after,
div + .ProseMirror-gapcursor:has(+ div:not([data-element="true"]))::after {
  @apply !my-2.5;
}
.ProseMirror-dropcursor {
  @apply text-primary;
}

html {
  font-family: "NunitoVariable", sans-serif;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  @apply h-[100dvh] text-gray-700 bg-gray-100 from-secondary to-primary overflow-hidden;
}
html.dark {
  @apply text-white bg-gray-800;
}
[data-accent-color="energy"] {
  --color-primary: theme("colors.orange.500");
  --color-secondary: theme("colors.red.500");
}
[data-accent-color="neon"] {
  --color-primary: theme("colors.lime.400");
  --color-secondary: theme("colors.cyan.400");
}
[data-accent-color="sublime"] {
  --color-primary: theme("colors.rose.400");
  --color-secondary: theme("colors.indigo.500");
}
[data-accent-color="sunrise"] {
  --color-primary: theme("colors.rose.400");
  --color-secondary: theme("colors.orange.300");
}
[data-accent-color="flow"] {
  --color-primary: theme("colors.blue.400");
  --color-secondary: theme("colors.cyan.400");
}
body {
  @apply flex min-h-full;
}
#root {
  @apply flex flex-col flex-1 w-full;
}
.clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.break-anywhere {
  overflow-wrap: anywhere;
}
.cm-editor {
  @apply h-full;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%2012H17V17H12V12M19%203H18V1H16V3H8V1H6V3H5C3.9%203%203%203.9%203%205V19C3%2020.1%203.9%2021%205%2021H19C20.1%2021%2021%2020.1%2021%2019V5C21%203.9%2020.1%203%2019%203M19%205V7H5V5H19M5%2019V9H19V19H5Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat;
  width: 18px;
  height: 18px;
  border-width: thin;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%2C20A8%2C8%200%200%2C0%2020%2C12A8%2C8%200%200%2C0%2012%2C4A8%2C8%200%200%2C0%204%2C12A8%2C8%200%200%2C0%2012%2C20M12%2C2A10%2C10%200%200%2C1%2022%2C12A10%2C10%200%200%2C1%2012%2C22C6.47%2C22%202%2C17.5%202%2C12A10%2C10%200%200%2C1%2012%2C2M12.5%2C7V12.25L17%2C14.92L16.25%2C16.15L11%2C13V7H12.5Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat;
  width: 16px;
  height: 16px;
  border-width: thin;
}
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%2012H17V17H12V12M19%203H18V1H16V3H8V1H6V3H5C3.9%203%203%203.9%203%205V19C3%2020.1%203.9%2021%205%2021H19C20.1%2021%2021%2020.1%2021%2019V5C21%203.9%2020.1%203%2019%203M19%205V7H5V5H19M5%2019V9H19V19H5Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat;
}
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%2C20A8%2C8%200%200%2C0%2020%2C12A8%2C8%200%200%2C0%2012%2C4A8%2C8%200%200%2C0%204%2C12A8%2C8%200%200%2C0%2012%2C20M12%2C2A10%2C10%200%200%2C1%2022%2C12A10%2C10%200%200%2C1%2012%2C22C6.47%2C22%202%2C17.5%202%2C12A10%2C10%200%200%2C1%2012%2C2M12.5%2C7V12.25L17%2C14.92L16.25%2C16.15L11%2C13V7H12.5Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat;
}
#dropdowns {
  @apply transform w-full absolute overflow-hidden z-60 transition-all duration-500 pointer-events-none;
  height: calc(100% - 3.625rem - env(safe-area-inset-bottom, 0px));
}
#dropdowns > * {
  @apply pointer-events-auto;
}
.dropdown-opened #bottom-space-filler {
  @apply w-full fixed left-0 bottom-0 bg-gray-50 dark:bg-gray-800 md:hidden;
  height: calc(env(safe-area-inset-bottom, 0px) + 1px);
}
.sidebar-hidden #dropdowns {
  height: calc(100% - env(safe-area-inset-bottom, 0px));
}
.whitespace-nowrap-children * {
  @apply !whitespace-nowrap;
}
/*.slash-menu {
  @apply lt-md:!transform-none;
}*/
.shiki {
  @apply h-full w-full pl-6;
}
.highlight-text * {
  @apply bg-gradient-to-tr font-semibold text-transparent bg-clip-text dark:text-transparent dark:bg-clip-text;
}
.gradient-border-left {
  background: linear-gradient(to left, transparent 50%, theme(colors.gray.100) 50%),
    linear-gradient(to left, currentColor, currentColor);
  background-size:
    16px 2px,
    100% 2px;
}
.dark .gradient-border-left {
  background: linear-gradient(to left, transparent 50%, theme(colors.gray.800) 50%),
    linear-gradient(to left, currentColor, currentColor);
  background-size:
    16px 2px,
    100% 2px;
}

.gradient-border-right {
  background: linear-gradient(to right, transparent 50%, theme(colors.gray.100) 50%),
    linear-gradient(to right, currentColor, currentColor);
  background-size:
    16px 2px,
    100% 2px;
}
.dark .gradient-border-right {
  background: linear-gradient(to right, transparent 50%, theme(colors.gray.800) 50%),
    linear-gradient(to right, currentColor, currentColor);
  background-size:
    16px 2px,
    100% 2px;
}
